<template>
  <view class="search-box">
    <uni-search-bar
    @confirm="search"
    @input="input"
    placeholder="请输入搜索内容"
    cancelButton="none"
    ></uni-search-bar>
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="suggestList.length">
      <view class="sugg-item" v-for="(item, i) in suggestList" :key="i" @click="gotoDetail(item.goods_id)">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons
        type="trash"
        size="17"
        @click="cleanHistory"
        ></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="history-list" >
        <uni-tag
        :text="item"
        v-for="(item, i) in historyList"
        :key="i"
        @click="gotoGoodsList(item)"
        ></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
           // 延时器的 timerId
           timer: null,
           // 搜索关键词
           // 搜索建议列表
           suggestList: [],
           // 搜索结果列表
           resultList: [],
           // 搜索历史列表
           historyList: JSON.parse(uni.getStorageSync('UNI_APP_SHOP') || '[]')
      };
    },
    methods:{
      // 搜索框输入内容
      input(e) {
        if(this.timer) {
          clearTimeout(this.timer)
        } 
        this.timer = setTimeout(() => {
          this.getSearchSuggest(e)
        }, 500)
      },
      // 获取搜索建议
      async getSearchSuggest(query) {
        if(!query) return this.suggestList = []
        const { data: { meta, message } } = await uni.$http.get('/api/public/v1/goods/qsearch', { query })
        if(meta.status !== 200) return uni.$showMsg()
        if(message.length === 0) return uni.$showMsg('暂无相关数据')
        this.suggestList = message
      },
      // 点击每一项去详情
      gotoDetail(id) {
        uni.navigateTo({
          url:`/subpkg/goods_detail/goods_detail?goods_id=${id}`
        })
      },
      // 根据标签搜索
      search({value}) {
        if(!value.length) return
        this.historyList.unshift(value)
        this.historyList = [...new Set(this.historyList)]
        uni.setStorageSync('UNI_APP_SHOP', JSON.stringify(this.historyList))
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query=' + value
        })
      },
      // 清空搜索历史
      cleanHistory() {
         // 清空 data 中保存的搜索历史
          this.historyList = []
          // 清空本地存储中记录的搜索历史
          uni.removeStorageSync('UNI_APP_SHOP')
      },
      // 点击搜索历史item项跳到商品列表页面
      gotoGoodsList(val) {
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query=' + val
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.search-box {
    position: sticky;
    top: 0;
    z-index: 999;
    .sugg-list {
      padding: 0 5px;
    
      .sugg-item {
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    
        .goods-name {
          // 文字不允许换行（单行文本）
          white-space: nowrap;
          // 溢出部分隐藏
          overflow: hidden;
          // 文本溢出后，使用 ... 代替
          text-overflow: ellipsis;
          margin-right: 3px;
        }
      }
    }
    .history-box {
      padding: 0 5px;
    
      .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
      }
    
      .history-list {
        display: flex;
        flex-wrap: wrap;
    
        .uni-tag {
          margin-top: 5px;
          margin-right: 5px;
        }
      }
    }
}
</style>
